<!--语音详情-->
<template>
<div>
  <div class="df-body">
    <ul class="pic cf" v-if="itemsImg && itemsImg.length>0">
      <template v-for="(item, index) in itemsImg">
      <li @click="checkImg(item, index)"><img :src="item | simpleImgUrl"/></li>
      </template>
    </ul>
    <div class="voice-mail cf" id="voiceBox" v-if="itemsVoice && itemsVoice.length>0">
      <em class="f-l mr10">语音留言:</em>
      <template v-for="itemvo in itemsVoice">
        <div class="vm-ctx f-l" @click="playVoice(itemvo.voice)">
          <span class="txt">点击播放</span>
          <span class="second" v-if="itemvo.seconds">{{itemvo.seconds}}'</span>
        </div>
      </template>
    </div>
  </div>
  <prev-img :checkimgs ="checkimg" v-on:clearData="checkimg = ''"></prev-img>
  <!-- <previewer :list="list" ref="previewer"></previewer> -->
</div>
</template>

<script>
import prevImg from '@/components/share/previewPic/preview.vue';
// import {Previewer} from 'vux';
export default {
  props: ['id'],
  data() {
    return {
      todolist:'',
      itemsImg:[],
      itemsVoice:[],
      checkimg:'',
      playVoiceId:'',
      timer:'',
      // list:[],

      //APP新增参数
      isApp: false,
      audioPlayer: null,
      isPlaying: false,
      playingObject: null,
    };
  },
  components: {
    prevImg,
    // Previewer
  },
  created() {
    this.plusInit();
    this.getDate();
  },
  watch:{
    // itemsImg(val){
    //   var _this = this;
    //   this.creatList(_this.itemsImg)
    // },
    id(val){
      if(val){
        this.getDate();
      };
    }
  },
  beforeDestroy(){
    this.leave();
  },
  methods: {
    plusInit(){
      if (navigator.userAgent.toLowerCase().match(/MicroMessenger/i) != "micromessenger") {
        this.isApp = true;
      }
      if(this.isApp){
        if (window.plus) {
            plusReady();
        } else {
            document.addEventListener('plusready', plusReady, false);
        }
        function plusReady() {
            console.log('plus已经启动并加载...')
        }
      }
    },
    // creatList(val){
    //   this.list = [];
    //   for(var i = 0;i<val.length;i++){
    //     var obj = {
    //       src:val[i]
    //     }
    //     this.list.push(obj);
    //   }
    // },
    //------------------------------------------------------------语音------------------------------------------------------------
    playVoice(id) { 
      var self = this;
      if(self.isApp){
        self.app_playVoice(id, self);
      } else {
        self.wx_playVoice(id, self);
      }
    },

    leave(){
      var self = this;
      if(self.isApp){
        self.app_leaveFunction(self);
      } else {
        self.wx_leaveFunction(self);
      }
    },


    //===============================================微信语音===============================================
    //微信播放语音接口
    wx_playVoice: function(id){
      this.jWeixin.stopRecord();
      var target = $(event.target).parent();
      if(target.hasClass('cur')){
        $("#voiceBox .vm-ctx").removeClass('cur');
      }else{
        var _this = this;
        clearTimeout(_this.timer);
        this.timer = setTimeout(function() {
            $("#voiceBox .vm-ctx").removeClass('cur');
            target.addClass('cur');
            _this.playVoiceId = id;
            _this.jWeixin.playVoice({
              localId: id // 需要播放的音频的本地ID，由stopRecord接口获得
            });
            //监听语音播放完毕接口
            _this.jWeixin.onVoicePlayEnd({
              success: function (res) {
                target.removeClass('cur');
              }
            });
        }, 300);
      };
    },

    //微信离开页面时的操作
    wx_leaveFunction: function(){
      var self = this;
      if(this.playVoiceId){
        this.jWeixin.stopVoice({
          localId: self.playVoiceId // ID，由stopRecord接口获得
        });
      };
    },
    //===============================================微信语音===============================================

    //===============================================APP语音===============================================
    //APP播放录音
    app_playVoice: function(id, self){
      var target = $(event.target).parent();
      if(id.indexOf('wxLocalResource') > -1){
        plus.nativeUI.toast('此语音为微信端发布，请登录微信试听');
      } else {
        if(id.indexOf('/File/Index/') > -1){
          var id = 'https://image.csyaoly.com' + id;
        }
        if(self.playingObject == id){ //相同文件点击切换播放/停止
          $("#voiceBox .vm-ctx").removeClass('cur');
          self.audioPlayer.stop();
          self.audioPlayer = null;
          self.playingObject = null;
          self.isPlaying = false;
        } else {
          GoPlay(self, target);
        }
      }
      
      //播放
      function GoPlay(self, target){
        if(self.isPlaying == false) {
          self.audioPlayer = plus.audio.createPlayer(id);
          self.isPlaying = true; //正在播放
          self.playingObject = id; //正在播放的对象
          $("#voiceBox .vm-ctx").removeClass('cur');
          target.addClass('cur');
          self.audioPlayer.play(
            function() {
              $("#voiceBox .vm-ctx").removeClass('cur');
              self.playingObject = null; //正在播放的对象
              self.audioPlayer = null; //清空
              self.isPlaying = false; //播放完成事件
            },
            function(e) {
              plus.nativeUI.toast("播放器错误:" + e.message);
            }
          );
        } else {
          $("#voiceBox .vm-ctx").removeClass('cur');
          self.audioPlayer.stop(); //停止
          self.isPlaying = false; //正在播放
          self.playingObject = null;
          self.audioPlayer = null; //清空
          self.audioPlayer = plus.audio.createPlayer(id); //重新注册播放
          self.isPlaying = true;
          self.playingObject = id;
          $("#voiceBox .vm-ctx").removeClass('cur');
          target.addClass('cur');
          self.audioPlayer.play(
            function() {
              $("#voiceBox .vm-ctx").removeClass('cur');
              self.playingObject = null; //正在播放的对象
              self.audioPlayer = null; //清空
              self.isPlaying = false; //播放完成
            },
            function(e) {
              plus.nativeUI.toast("播放器错误:" + e.message);
            }
          );
        }
      }
    },

    //APP离开页面时的操作，停止+清除（播放器+录音器）
    app_leaveFunction:  function(self){
      if(self.audioPlayer){
        self.audioPlayer.stop();
        self.audioPlayer = null;
      }
    },
    //===============================================APP语音===============================================
    //------------------------------------------------------------语音------------------------------------------------------------



    //------------------------------------------------------------图片------------------------------------------------------------
    checkImg(item, index){
      var self = this;
      if(self.isApp){
        self.app_previewImg(item, index);
      } else {
        self.wx_previewImg(value);
      }
    },
    //===============================================微信图片===============================================
    wx_previewImg: function(value){
      this.checkimg = value;
    },
    //===============================================微信图片===============================================

    //===============================================APP图片===============================================
    app_previewImg: function(value, index){
      this.checkimg = value;
      // this.$refs.previewer.show(index);
    },
    //===============================================APP图片===============================================

    getDate(){
      var self = this;
      if(this.id){
        this.todolist = this.id;
        if(this.todolist.Picture && this.todolist.Picture!='null'){
          var imgArr = JSON.parse(this.todolist.Picture);
          for(var i=0;i<imgArr.length;i++){
            this.itemsImg.push(imgArr[i]);
          };
        };
        if(this.todolist.Voice){
          this.itemsVoice =JSON.parse(this.todolist.Voice);
        };
      }
      // else{
      //   var value = sessionStorage.item;
      //   this.todolist = value?JSON.parse(value):'';
      //   this.itemsImg=JSON.parse(this.todolist.Picture);
      //   this.itemsVoice =JSON.parse(this.todolist.Voice);
      // }
    }
  }
};
</script>